<!DOCTYPE html>
<html>

<body>
    <p>1</p>
    <p>循环在编程中用于自动执行重复性任务：</p>
    <script>
        for (let i = 0; i < 10; i++) {
            document.write("基础教程 www.cainiaojc.com <br>");
        }
    </script>

    <br>
    <br>
    <p>2</p>
    <p>单击按钮以升序遍历数组：</p>
    <button onclick="myFunc()">Click</button>
    <p id="RuR"></p>
    <script>
        function myFunc() {
            var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
            var txt = ' ';
            for (var i = 0; i < fruits.length; i++) {
                txt += fruits[i] + "<br>";
            }

            document.getElementById("RuR").innerHTML = txt;
        }
    </script>

    <br>
    <br>
    <p>3</p>
    <p>我们可以通过在循环外部初始化变量，输出不带初始化表达式的for语句：</p>
    <script>
        var i = 0;
        for (; i < 5; i++) {
            document.write(i + "<br>");
        }
    </script>

    <br>
    <br>
    <p>4</p>
    <p>我们还可以从循环中删除条件表达式：</p>
    <script>
        var i = 0;
        for (;; i++) {
            if (i > 3) {
                break;
            }
            document.write(i + "<br>");
        }
    </script>
    <p> <b>注意：</b>如果省略该条件，则必须包含break语句，否则该循环将永远作为无限循环运行，并可能导致浏览器崩溃。</p>

    <br>
    <br>
    <p>5</p>
    <p>我们可以从循环中删除所有表达式：</p>
    <script>
        var i = 0;
        for (;;) {
            if (i > 3) {
                break;
            }
            document.write(i + "<br>");
            i++;
        }
    </script>

    <br>
    <br>
    <p>点击按钮开始循环：</p>
    <button onclick="mybit()">Click</button>
    <p id="result" style="font-size: 1.4em;"></p>
    <script>
        function mybit() {
            var txt = "";
            for (var row = 0; row < 10; row++) {
                for (var col = 0; col < row; col++) {
                    txt += "*";
                }
                txt += "<br>"
            }
            document.getElementById("result").innerHTML = txt;
        }
    </script>

    <br>
    <br>
    <p>以下示例循环遍历对象的属性：</p>
    <p>for ... in</p>
    <script>
        var myObj = {
            name: "Tiger",
            age: 22,
            height: 175,
            city: "New Delhi",
            getNoting: function() {
                return "";
            }
        };

        for (let x in myObj) {
            document.write(x + "=" + myObj[x]);
            document.write("<br>");
        }
    </script>

    <br>
    <br>
    <p>遍历数组：</p>
    <p>for ... of</p>
    <script>
        let item = [10, 20, 30, 40, 50, 60];

        for (let x of item) {
            document.write(x);
            document.write("<br>");
        }
    </script>
</body>

</html>